<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery下拉显示图片相册代码</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="css/style.css" rel="stylesheet">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/superbox.js"></script>
<script type="text/javascript">
$(function() {
    $('.superbox').SuperBox();
});
</script>

</head>
<body>

<div class="wrapper">
    <!-- SuperBox -->
    <div class="superbox">
        <div class="superbox-list">
            <img src="img/superbox/superbox-thumb-1.jpg" data-img="img/superbox/superbox-full-1.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-2.jpg" data-img="img/superbox/superbox-full-2.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-3.jpg" data-img="img/superbox/superbox-full-3.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-4.jpg" data-img="img/superbox/superbox-full-4.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-5.jpg" data-img="img/superbox/superbox-full-5.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-6.jpg" data-img="img/superbox/superbox-full-6.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-7.jpg" data-img="img/superbox/superbox-full-7.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-8.jpg" data-img="img/superbox/superbox-full-8.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-9.jpg" data-img="img/superbox/superbox-full-9.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-10.jpg" data-img="img/superbox/superbox-full-10.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-11.jpg" data-img="img/superbox/superbox-full-11.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-12.jpg" data-img="img/superbox/superbox-full-12.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-13.jpg" data-img="img/superbox/superbox-full-13.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-14.jpg" data-img="img/superbox/superbox-full-14.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-15.jpg" data-img="img/superbox/superbox-full-15.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-16.jpg" data-img="img/superbox/superbox-full-16.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-17.jpg" data-img="img/superbox/superbox-full-17.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-18.jpg" data-img="img/superbox/superbox-full-18.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-19.jpg" data-img="img/superbox/superbox-full-19.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-20.jpg" data-img="img/superbox/superbox-full-20.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-21.jpg" data-img="img/superbox/superbox-full-21.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-22.jpg" data-img="img/superbox/superbox-full-22.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-23.jpg" data-img="img/superbox/superbox-full-23.jpg" alt="" class="superbox-img">
        </div><!--
        --><div class="superbox-list">
            <img src="img/superbox/superbox-thumb-24.jpg" data-img="img/superbox/superbox-full-24.jpg" alt="" class="superbox-img">
        </div>
        <div class="superbox-float"></div>
    </div>
    <!-- /SuperBox -->
</div>

</body>
</html>